{"componentChunkName":"component---src-templates-post-js","path":"/blog/react-hooks-vs-class","webpackCompilationHash":"0f979b9b09e9513b4912","result":{"data":{"site":{"siteMetadata":{"keywords":["blog","ubug","tech blog","技术博客","playground"]}},"mdx":{"fields":{"title":"⚓ React Hooks 理解","tips":["原来 Hooks 这么特别啊！","我们不一样，每个用法都有不同的场景。"],"categories":["code"],"datetime":"2019-09-18 20:24:36","noFooter":false,"description":"hooks 的思想是开发者不再需要去理清每一个生命周期函数的触发时机，以及在里面处理逻辑会有哪些影响。而是更关注去思考哪些是状态，哪些是副作用，哪些是需要缓存的复杂计算和不必要的渲染。class 更偏向的是清晰完整的生命周期，一个经典的面向对象思想，强调的是方法和属性。","plainTextDescription":"hooks 的思想是开发者不再需要去理清每一个生命周期函数的触发时机，以及在里面处理逻辑会有哪些影响。而是更关注去思考哪些是状态，哪些是副作用，哪些是需要缓存的复杂计算和不必要的渲染。class 更偏向的是清晰完整的生命周期，一个经典的面向对象思想，强调的是方法和属性。\n","author":"Ubug","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='117'%3e%3cpath%20d='M0%2059v58h401V0H0v59m206-26c-6%204-21%2024-20%2026l14-8-2-2-2-2%2013-13c7-3%2010%202%208%2012l-1%207c2%201%203-1%204-7%203-14-4-20-14-13m1%2014c0%203%200%2015%202%2014h2c4-1%209%2018%206%2022-3%203-8%202-14-4-4-4-6-5-6-3%200%203%2012%2011%2016%2011%2010%200%2010-14%201-31-4-9-6-11-7-9m-28%202c-14%206-13%2015%201%2020%206%202%2028%204%2028%202l-13-7-1%203c0%202-1%203-9%200-17-4-18-12-1-16l4-2c1-2-4-2-9%200'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":3.4265734265734267,"src":"/static/01f96153bdd5c8bda1b12a6a5ec91e8e/6aea0/banner.jpg","srcSet":"/static/01f96153bdd5c8bda1b12a6a5ec91e8e/9e575/banner.jpg 500w,\n/static/01f96153bdd5c8bda1b12a6a5ec91e8e/6aea0/banner.jpg 980w","srcWebp":"/static/01f96153bdd5c8bda1b12a6a5ec91e8e/cd024/banner.webp","srcSetWebp":"/static/01f96153bdd5c8bda1b12a6a5ec91e8e/7fe04/banner.webp 500w,\n/static/01f96153bdd5c8bda1b12a6a5ec91e8e/cd024/banner.webp 980w","sizes":"(max-width: 980px) 100vw, 980px"}}},"bannerCredit":"Banner from [React Hooks](https://www.framer.com/blog/posts/react-hooks/)","slug":"/blog/react-hooks-vs-class","tags":["react","hooks","技巧","思考","功能"]},"headings":[{"value":"0. 没有 Hooks 的日子里","depth":2},{"value":"1. 数据、状态、容器组件 VS 渲染、样式、展示组件","depth":2},{"value":"1.1 状态管理 -> 业务至上","depth":3},{"value":"1.2 代码复用 -> 逻辑分割","depth":3},{"value":"2. Hooks 出现","depth":2},{"value":"2.1 全新的思维","depth":3},{"value":"2.2 渐入佳境","depth":3},{"value":"4. 从 useCallback 和 deps 来看不同的组件思维方式和性能优化，以及闭包的能力","depth":2},{"value":"闭包原因导致的很多常见问题，如果不了解这个特性，或者 use-* 做的很复杂之后很可能会莫名其妙：","depth":3},{"value":"5. 结论","depth":2}],"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst View = () => {\n let [count, setCount] = React.useState(0);\n return mdx(\"button\", {\n onClick: () => setCount(count + 1)\n }, \"\\u70B9\\u6211\\uFF1A\", count);\n};\nfunction Counter() {\n const [count, setCount] = useState(0);\n useEffect(() => {\n const id = setInterval(() => {\n setCount(count + 1); // This effect depends on the `count` state\n }, 1000);\n return () => clearInterval(id);\n }, []); // 🔴 Bug: `count` is not specified as a dependency\n return mdx(\"div\", null, count);\n}\nconst _frontmatter = {\n \"slug\": \"react-hooks-vs-class\",\n \"title\": \"⚓ React Hooks 理解\",\n \"date\": \"2019-09-18 20:24:36\",\n \"author\": \"Ubug\",\n \"description\": \"hooks 的思想是开发者不再需要去理清每一个生命周期函数的触发时机，以及在里面处理逻辑会有哪些影响。而是更关注去思考哪些是状态，哪些是副作用，哪些是需要缓存的复杂计算和不必要的渲染。class 更偏向的是清晰完整的生命周期，一个经典的面向对象思想，强调的是方法和属性。\",\n \"categories\": [\"code\"],\n \"tags\": [\"react\", \"hooks\", \"技巧\", \"思考\", \"功能\"],\n \"banner\": \"./banner.jpg\",\n \"bannerCredit\": \"Banner from [React Hooks](https://www.framer.com/blog/posts/react-hooks/)\",\n \"tips\": [\"原来 Hooks 这么特别啊！\", \"我们不一样，每个用法都有不同的场景。\"]\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst CodeWithPreview = makeShortcode(\"CodeWithPreview\");\nconst layoutProps = {\n View,\n Counter,\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u60F3\\u5206\\u4EAB\\u7684\\u662F\\u5BF9 React-Hooks \\u8FD9\\u4E2A\\u65B0\\u529F\\u80FD\\u7684\\u601D\\u8003\\uFF0C\\u4E0D\\u4EC5\\u4EC5\\u662F\\u65B0\\u7684\\u63A5\\u53E3\\uFF0C\\u91CD\\u8981\\u7684\\u662F\\u8FD9\\u79CD\\u5F00\\u53D1\\u6A21\\u5F0F\\u4EE3\\u8868\\u7684\\u903B\\u8F91\\u7684\\u62C6\\u5206\\uFF0C\\u72B6\\u6001\\u548C\\u526F\\u4F5C\\u7528\\u7684\\u601D\\u7EF4\\u65B9\\u5F0F\\uFF0C\\u800C\\u4E0D\\u662F\\u751F\\u547D\\u5468\\u671F~~\")), mdx(\"hr\", null), mdx(\"p\", null, \"Hooks \\u6982\\u5FF5\\u521A\\u51FA\\u6765\\u7684\\u65F6\\u5019\\u5C31\\u770B\\u4E86\\u53D1\\u5E03\\u4F1A\\u7684 Presentation\\uFF0C\\u5F53\\u65F6\\u611F\\u89C9\\u601D\\u60F3\\u7279\\u522B\\u597D\\uFF0C\\u80FD\\u591F\\u5728\\u4E00\\u4E2A\\u51FD\\u6570\\u91CC\\u9762\\u5C31\\u53EF\\u4EE5\\u5BF9\\u6570\\u636E\\u548C\\u751F\\u547D\\u5468\\u671F\\u8FDB\\u884C\\u7BA1\\u7406\\u3002\"), mdx(\"p\", null, \"\\u800C\\u4E14\\u5BF9\\u4E8E\\u4ECE prototype \\u8FC7\\u6765\\u7684\\u539F\\u578B\\u7EE7\\u627F\\uFF0C\\u4E00\\u76F4\\u89C9\\u5F97\\u867D\\u7136 Class \\u5F88\\u597D\\u7528\\uFF0C\\u4F46\\u662F\\u592A\\u91CD\\u91CF\\u4E86\\uFF0C\\u4E00\\u4E2A\\u5F88\\u7B80\\u5355\\u7684\\u7EC4\\u4EF6\\u53EA\\u8981\\u6D89\\u53CA\\u5230\\u5185\\u90E8\\u72B6\\u6001\\u5C31\\u8981\\u6709 Class\\uFF0C\\u6240\\u4EE5 Hooks \\u53D1\\u5E03\\u4E4B\\u540E\\u5F88\\u957F\\u4E00\\u6BB5\\u65F6\\u95F4\\u6211\\u90FD\\u662F\\u4EE5\\u4E3A\\u8981\\u66FF\\u4EE3 Class \\u7EC4\\u4EF6\\uFF0C\\u81F3\\u5C11\\u5927\\u90E8\\u5206\\u573A\\u666F\\u53EF\\u4EE5\\u7528 Hooks \\u91CD\\u5199\\u3002\"), mdx(\"p\", null, \"\\u5728\\u4F7F\\u7528\\u4E86\\u4E24\\u4E09\\u4E2A\\u6708\\u4E4B\\u540E\\uFF0C\\u4E0D\\u7528 Hooks \\u4E0D\\u8212\\u670D\\u65AF\\u57FA\\u4E5F\\u8E29\\u4E86\\u5F88\\u591A\\u5751\\uFF0C\\u6211\\u73B0\\u5728\\u624D\\u987F\\u609F\\u8FC7\\u6765\\uFF0C\\u5176\\u5B9E Hooks \\u4E0D\\u4EC5\\u4EC5\\u662F\\u770B\\u4E0A\\u53BB\\u8FD9\\u4E48\\u7B80\\u5355\\uFF0C\\u4E5F\\u4E0D\\u662F\\u4EC5\\u4EC5\\u7528\\u6765\\u53D6\\u4EE3 Class \\u7684\\uFF0C\\u800C\\u662F\\u4E00\\u4E2A\\u4E0D\\u4E00\\u6837\\u7684\\u7EC4\\u4EF6\\u601D\\u60F3\\u3002\"), mdx(\"h2\", null, \"0. \\u6CA1\\u6709 Hooks \\u7684\\u65E5\\u5B50\\u91CC\"), mdx(\"p\", null, \"\\u6211\\u60F3\\u8981\\u5F00\\u53D1\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u5173\\u6CE8\\u7EC4\\u4EF6\"), mdx(\"style\", null, styleStr), mdx(CodeWithPreview, {\n codes: [{\n lang: 'jsx',\n code: code1\n }, {\n lang: 'jsx',\n code: \"\\n\\n\"\n }, {\n lang: 'css',\n code: \"/* === css style === */\"\n }],\n withTitle: true,\n preview: mdx(\"div\", null, mdx(Follow, {\n followed: true,\n mdxType: \"Follow\"\n }), mdx(\"br\", null), mdx(Follow, {\n followed: false,\n mdxType: \"Follow\"\n })),\n mdxType: \"CodeWithPreview\"\n }), mdx(\"p\", null, \"\\u8FD9\\u6837\\u4E00\\u4E2A\\u7EC4\\u4EF6\\u4E0D\\u53EF\\u80FD\\u662F\\u7B80\\u5355\\u7684\\u5C55\\u793A\\uFF0C\\u5FC5\\u5B9A\\u9700\\u8981\\u4E00\\u4E9B\\u4EA4\\u4E92\\uFF0C\\u4F46\\u662F props \\u7684\\u5355\\u5411\\u66F4\\u65B0\\u6CA1\\u529E\\u6CD5\\u5B9E\\u73B0\\u7075\\u6D3B\\u7684\\u72B6\\u6001\\u7BA1\\u7406\\uFF0C\\u6240\\u4EE5\\u5FC5\\u987B\\u8981\\u5C06\\u8FD9\\u4E2A\\u51FD\\u6570\\u5F0F\\u7EC4\\u4EF6\\u6539\\u6210 class \\u7684\\uFF0C\\u540C\\u65F6\\u8003\\u8651\\u5230\\u4E1A\\u52A1\\u590D\\u6742\\u6027\\uFF0C\\u6DFB\\u52A0\\u4E86\\u6570\\u636E\\u7684\\u521D\\u59CB\\u5316\\u3001\\u8BA2\\u9605\\u3001\\u66F4\\u65B0\\u7B49\\u751F\\u547D\\u5468\\u671F\\u7B49\\uFF0C\\u6700\\u7EC8\\u5B9E\\u73B0\\uFF1A\"), mdx(Demo2, {\n mdxType: \"Demo2\"\n }), mdx(\"p\", null, \"\\u73B0\\u5728\\u6211\\u4EEC\\u5C31\\u6709\\u4E00\\u4E2A\\u53EF\\u4EA4\\u4E92\\u7EC4\\u4EF6\\u4E86\\uFF0C\\u903B\\u8F91\\u7B97\\u662F\\u5F88\\u6E05\\u6670\\u3002\\u4E5F\\u5F88\\u660E\\u663E\\u7684\\u5F97\\u51FA\\u7ED3\\u8BBA\\uFF0C\\u5982\\u679C\\u9700\\u8981\\u5185\\u5BB9\\u5C55\\u793A\\uFF0C\\u4F7F\\u7528\\u51FD\\u6570\\u5F0F\\u7EC4\\u4EF6\\uFF0C\\u5982\\u679C\\u60F3\\u8981\\u4EA4\\u4E92\\uFF0C\\u5C31\\u5FC5\\u987B\\u6539\\u5199\\u6210\\u4E00\\u4E2A class \\u7EC4\\u4EF6\\u3002\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"function \\u7EC4\\u4EF6\\u7B80\\u5355\\u7EAF\\u7CB9\\uFF0C\\u53EA\\u6709\\u4E00\\u4E2A\\u8F93\\u5165\\u8F93\\u51FA\\uFF0C\\u65E0\\u72B6\\u6001\\u7684\\u5F00\\u53D1\\u6A21\\u5F0F\\uFF0C\\u786E\\u5B9A\\u7684\\u8F93\\u5165\\u4E00\\u5B9A\\u6709\\u786E\\u5B9A\\u7684\\u8F93\\u51FA\\uFF0C\\u5F53\\u65F6\\u4E5F\\u88AB\\u79F0\\u4E3A SFC\\uFF08stateless functional component\\uFF09\\u3002\\u6240\\u4EE5\\u4E0A\\u9762\\u7684\\u4F8B\\u5B50\\u5982\\u679C\\u4F7F\\u7528\\u51FD\\u6570\\u5F0F\\uFF0C\\u9664\\u975E\\u7236\\u7EC4\\u4EF6\\u6539\\u53D8\\u8F93\\u5165\\uFF0C\\u5426\\u5219\\u4E00\\u5B9A\\u6CA1\\u529E\\u6CD5\\u5B9E\\u73B0\\u754C\\u9762\\u6539\\u53D8\\u3002\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"class \\u7684\\u7EC4\\u4EF6\\u6709\\u81EA\\u5DF1\\u7684\\u751F\\u547D\\u5468\\u671F\\uFF0C\\u53EF\\u4EE5\\u7EF4\\u62A4\\u81EA\\u5DF1\\u7684\\u72B6\\u6001\\uFF0C\\u7236\\u7EC4\\u4EF6\\u7684\\u8F93\\u5165\\u65E0\\u6CD5\\u552F\\u4E00\\u786E\\u5B9A\\u7EC4\\u4EF6\\u7684\\u7ED3\\u679C\\uFF0C\\u7EC4\\u4EF6\\u7684\\u529F\\u80FD\\u66F4\\u72EC\\u7ACB\\u7075\\u6D3B\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u72B6\\u6001\\u3001\\u65B9\\u6CD5\\u548C\\u4E8B\\u4EF6\\u6765\\u5B8C\\u6210\\u7528\\u6237\\u7684\\u4EA4\\u4E92\\uFF0C\\u5BF9\\u4E8E\\u7236\\u7EC4\\u4EF6\\u5185\\u90E8\\u903B\\u8F91\\u90FD\\u662F\\u9ED1\\u76D2\\u3002\"))), mdx(\"p\", null, \"\\u4EE5\\u4E0A\\u5C31\\u662F React \\u5F00\\u53D1\\u8005\\u5728\\u4E00\\u6BB5\\u65F6\\u95F4\\u540E\\u90FD\\u4F1A\\u6709\\u7684\\u601D\\u8003\\u3002\"), mdx(\"h2\", null, \"1. \\u6570\\u636E\\u3001\\u72B6\\u6001\\u3001\\u5BB9\\u5668\\u7EC4\\u4EF6 VS \\u6E32\\u67D3\\u3001\\u6837\\u5F0F\\u3001\\u5C55\\u793A\\u7EC4\\u4EF6\"), mdx(\"p\", null, \"\\u51E0\\u4E4E\\u6240\\u6709\\u7684\\u6700\\u4F73\\u5B9E\\u8DF5\\u90FD\\u5728\\u8BF4\\u7EC4\\u4EF6\\u4E0A\\u9700\\u8981\\u6709\\u660E\\u786E\\u7684\\u72B6\\u6001\\u548C\\u5E72\\u51C0\\u7684\\u6E32\\u67D3\\uFF0C\\u6570\\u636E\\u548C\\u6E32\\u67D3\\u5206\\u79BB\\uFF0C\\u83B7\\u53D6\\u3001\\u5904\\u7406\\u3001\\u66F4\\u65B0\\u6570\\u636E\\u4E4B\\u540E\\u518D\\u8C03\\u7528\\u7EAF\\u6E32\\u67D3\\u7EC4\\u4EF6\\u5C55\\u793A\\u3002\\u8FD9\\u4E5F\\u662F\\u6570\\u636E\\u7BA1\\u7406\\u3001\\u72B6\\u6001\\u7BA1\\u7406\\u5C42\\u529F\\u80FD\\u5728 react \\u751A\\u81F3\\u6240\\u6709\\u4E2D\\u5927\\u578B\\u5E94\\u7528\\u7684\\u5F00\\u53D1\\u8FC7\\u7A0B\\u4E2D\\u6709\\u5F88\\u5927\\u5206\\u91CF\\u7684\\u539F\\u56E0\\uFF0C\\u4E5F\\u80FD\\u4ECE\\u903B\\u8F91\\u4E0A\\u66F4\\u597D\\u7684\\u62BD\\u8C61\\u548C\\u590D\\u7528\\u4EE3\\u7801\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F\\u4F18\\u79C0\\u7684\\u56E2\\u961F\\u6CA1\\u90A3\\u4E48\\u591A\\uFF0C\\u66F4\\u6CA1\\u90A3\\u4E48\\u591A\\u9AD8\\u8D28\\u91CF\\u7684\\u4F18\\u96C5\\u5B9E\\u73B0\\uFF0C\\u6570\\u636E\\u7684\\u6D41\\u8F6C\\u548C\\u7EC4\\u4EF6\\u8BBE\\u8BA1\\u5E76\\u6CA1\\u6709\\u90A3\\u4E48\\u8FFD\\u6C42\\u5B8C\\u7F8E\\uFF0C\\u73B0\\u72B6\\u662F\\u5F88\\u591A\\u4E1A\\u52A1\\u4E2D\\u7EC4\\u4EF6\\u7684\\u5B9E\\u8DF5\\u5F88\\u591A\\u53D8\\u6210\\u4E86\\uFF1A\"), mdx(\"h3\", null, \"1.1 \\u72B6\\u6001\\u7BA1\\u7406 -> \\u4E1A\\u52A1\\u81F3\\u4E0A\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \" \\u72B6\\u6001\\u7BA1\\u7406 \"), \" \\u4ECE\\u7EC4\\u4EF6\\u7684\\u6A21\\u5F0F\\u6765\\u8BF4\\uFF0Cclass \\u548C function \\u4EE3\\u8868\\u7740\\u4E24\\u79CD\\u4E0D\\u540C\\u7684\\u5F00\\u53D1\\u4F53\\u9A8C\\uFF0C\\u6309\\u7167\\u6211\\u7684\\u7406\\u89E3\\u5C31\\u662F\\u5E26\\u590D\\u6742\\u72B6\\u6001\\u7BA1\\u7406\\u7684\\u7EC4\\u4EF6\\uFF0C\\u548C\\u7EAF\\u5C55\\u793A\\u578B\\u7EC4\\u4EF6\\u3002\"), mdx(\"p\", null, \"React \\u5C06\\u72B6\\u6001\\u7BA1\\u7406\\u7684\\u65B9\\u6848\\u6254\\u7ED9\\u4E86\\u793E\\u533A\\uFF0C\\u793E\\u533A\\u8BDE\\u751F\\u4E86\\u975E\\u5E38\\u591A\\u7684\\u4F18\\u79C0\\u65B9\\u6848\\uFF0C\\u6BD4\\u5982 Redux\\u3001Mobx \\u7B49\\uFF0C\\u72B6\\u6001\\u5171\\u4EAB\\u548C\\u5206\\u53D1\\u8BA9\\u72B6\\u6001\\u7BA1\\u7406\\u8DB3\\u4EE5\\u6491\\u8D77\\u5927\\u578B\\u5E94\\u7528\\u7684\\u5F00\\u53D1\\u3002\"), mdx(\"p\", null, \"\\u7406\\u60F3\\u5F88\\u4E30\\u6EE1\\uFF0C\\u4F46\\u662F\\u73B0\\u5B9E\\u975E\\u5E38\\u9AA8\\u5E72\\uFF0C\\u6709\\u5F3A\\u8FEB\\u75C7\\u7684\\u5F00\\u53D1\\u8005\\u6CA1\\u90A3\\u4E48\\u591A\\uFF0C\\u4F46\\u662F\\u7740\\u6025\\u50AC\\u4EBA\\u547D\\u7684\\u8001\\u677F\\u5F88\\u591A\\uFF0C\"), mdx(\"p\", null, \"\\u6240\\u4EE5\\u5F88\\u591A\\u7684\\u4EA4\\u4E92\\u529F\\u80FD\\u3001\\u6570\\u636E\\u83B7\\u53D6\\u529F\\u80FD\\u90FD\\u4E00\\u80A1\\u8111\\u7684\\u653E\\u5230 class \\u7EC4\\u4EF6\\u91CC\\uFF0C\\u751F\\u547D\\u5468\\u671F\\u5206\\u5272\\u5F00\\u7684\\u5404\\u79CD\\u903B\\u8F91\\u53D8\\u6210\\u4E86\\u4E00\\u56E2\\u9EBB\\uFF0C\\u6CA1\\u6709\\u65F6\\u95F4\\u6216\\u8005\\u521D\\u671F\\u6CA1\\u6CD5\\u53BB\\u5B9E\\u73B0\\u6700\\u4F73\\u5B9E\\u8DF5\\uFF0C\\u540E\\u671F\\u66F4\\u6CA1\\u6CD5\\u62BD\\u8C61\\u66F4\\u7EC6\\u7C92\\u5EA6\\u7684\\u4EE3\\u7801\\u91CD\\u7528\\uFF0C\\u56F4\\u7ED5\\u7740\\u6846\\u67B6\\u7684\\u751F\\u547D\\u5468\\u671F\\u3001state\\u7684\\u5904\\u7406\\u4EE3\\u7801\\u5230\\u5904\\u90FD\\u662F\\u3002\\u5373\\u4F7F function \\u7EC4\\u4EF6\\u7B80\\u5355\\u7EAF\\u7CB9\\uFF0C\\u53EA\\u6709\\u4E00\\u4E2A\\u8F93\\u5165\\u8F93\\u51FA\\uFF0C\\u4F46\\u662F\\u4E00\\u65E6\\u9700\\u6C42\\u53D8\\u66F4\\uFF0C\\u6216\\u8005\\u9700\\u8981\\u4EA4\\u4E92\\uFF0C\\u5F88\\u5FEB\\u5C31\\u5FC5\\u987B\\u6539\\u5199\\u6210 class \\u7C7B\\u578B\\u4E86\\u3002\"), mdx(\"h3\", null, \"1.2 \\u4EE3\\u7801\\u590D\\u7528 -> \\u903B\\u8F91\\u5206\\u5272\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \" \\u4EE3\\u7801\\u590D\\u7528 \"), \" \\u4ECE\\u4EE3\\u7801\\u72B6\\u6001\\u903B\\u8F91\\u590D\\u7528\\u4E0A\\u6765\\u8BF4\\uFF0CHoC \\u9AD8\\u9636\\u7EC4\\u4EF6\\u548C Render props \\u6280\\u672F\\u5F00\\u53D1\\u6A21\\u5F0F\\u4E00\\u822C\\u7528\\u7684\\u6BD4\\u8F83\\u591A\\u3002\"), mdx(\"p\", null, \"\\u53EA\\u6709 class \\u548C function \\u7684\\u4F7F\\u7528\\u4F53\\u9A8C\\uFF0C\\u5F88\\u591A\\u65F6\\u5019\\u5ACC\\u5F03 class \\u7B28\\u91CD\\u3001\\u8BA8\\u538C function \\u6CA1\\u7528\\u7684\\u4F53\\u9A8C\\uFF0C\\u4F46\\u662F\\u6BD5\\u7ADF\\u8FD9\\u51E0\\u79CD\\u5F00\\u53D1\\u6A21\\u5F0F\\u90FD\\u6709\\u72EC\\u7279\\u7684\\u573A\\u666F\\u9700\\u6C42\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F\\u5927\\u90E8\\u5206\\u5F00\\u53D1\\u4EBA\\u5458\\u6CA1\\u529E\\u6CD5\\u505A\\u5230\\u6E32\\u67D3\\u548C\\u72B6\\u6001\\u7684\\u5206\\u79BB\\uFF0C\\u5DE5\\u4F5C\\u73AF\\u5883\\u662F\\u4E1A\\u52A1\\u800C\\u4E0D\\u662F\\u6846\\u67B6\\uFF0C\\u6240\\u4EE5\\u5FEB\\u901F\\u5B9E\\u73B0\\u4E1A\\u52A1\\u7684\\u65F6\\u5019\\uFF0C\\u5F88\\u96BE\\u505A\\u597D\\u4E1A\\u52A1\\u7684\\u68B3\\u7406\\uFF0C\\u5C31\\u51FA\\u73B0\\u4E86\\u5927\\u91CF\\u4F7F\\u7528 class \\u7EC4\\u4EF6\\uFF0C\\u5728\\u751F\\u547D\\u5468\\u671F\\u4E2D\\u505A\\u5F88\\u591A\\u903B\\u8F91\\u5904\\u7406\\u3002\"), mdx(\"p\", null, \"\\u7528\\u5F97\\u591A\\u4E86\\u540E\\u624D\\u53D1\\u73B0\\u5F88\\u591A\\u5730\\u65B9\\u4E5F\\u5E76\\u4E0D\\u5C3D\\u5982\\u4EBA\\u610F\\uFF0C\\u53EF\\u80FD\\u4E5F\\u662F\\u80FD\\u529B\\u95EE\\u9898\\u6216\\u8005\\u6CA1\\u6709\\u65F6\\u95F4\\u6765\\u62BD\\u8C61\\uFF0C\\u6BD4\\u5982 class \\u7EC4\\u5EFA\\u4E2D\\u4E25\\u683C\\u7684\\u751F\\u547D\\u5468\\u671F\\u7ECF\\u5E38\\u628A\\u903B\\u8F91\\u4EE3\\u7801\\u5206\\u5272\\u5F00\\uFF0C\\u6BCF\\u4E2A\\u9636\\u6BB5\\u7684\\u72B6\\u6001\\u903B\\u8F91\\u53D8\\u66F4\\uFF0C\\u590D\\u6742\\u7EC4\\u4EF6\\u4F1A\\u53D8\\u5F97\\u5F88\\u6DF7\\u4E71\\u5F88\\u96BE\\u62C6\\u5206\\u3002function \\u7EC4\\u4EF6\\u7ECF\\u5E38\\u505A\\u7B80\\u5355\\u7EC4\\u4EF6\\uFF0C\\u4F46\\u662F\\u4E00\\u65E6\\u9700\\u6C42\\u53D8\\u66F4\\uFF0C\\u6216\\u8005\\u9700\\u8981\\u4EA4\\u4E92\\uFF0C\\u5F88\\u5FEB\\u5C31\\u5FC5\\u987B\\u6539\\u5199\\u6210 class \\u7C7B\\u578B\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u5176\\u5B9E\\u4E0A\\u9762\\u7684\\u4E0D\\u53CB\\u597D\\u7684\\u5730\\u65B9\\u4E5F\\u4E0D\\u662F\\u90A3\\u4E48\\u5938\\u5F20\\uFF0C\\u4F46\\u662F Hooks \\u51FA\\u73B0\\u786E\\u5B9E\\u63D0\\u4F9B\\u4E86\\u4E00\\u4E2A\\u53EF\\u80FD\\u66F4\\u597D\\u7684\\u65B9\\u6848\\uFF0C\\u4E1A\\u52A1\\u5C42\\u6709\\u4E86\\u4E00\\u4E2A\\u7075\\u6D3B\\u8FD8\\u53C8\\u5F3A\\u5927\\u7684\\u6A21\\u5F0F\\u3002\"), mdx(\"h2\", null, \"2. Hooks \\u51FA\\u73B0\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Hooks \\u7684\\u51FA\\u73B0\\u8BA9 function \\u7EC4\\u4EF6\\u4ECE\\u6570\\u636E\\u8F93\\u5165\\u5230\\u89C6\\u56FE\\u8F93\\u51FA\\u7684\\u6A21\\u5F0F\\u53D8\\u6210\\u4E86\\u6709\\u72B6\\u6001\\u903B\\u8F91\\u7684\\u7EC4\\u4EF6\\u3002\")), mdx(\"p\", null, \"\\u65E0\\u72B6\\u6001\\u8868\\u73B0\\u662F\\u8F93\\u5165\\u76F8\\u540C\\uFF0C\\u8F93\\u51FA\\u5C31\\u76F8\\u540C\\u3002\\u539F\\u672C\\u7684 function \\u7EC4\\u4EF6\\uFF0C\\u8F93\\u5165\\u53EF\\u4EE5\\u6307 props \\u8F93\\u51FA\\u662F \\u89C6\\u56FE UI\\u3002\\n\\u73B0\\u5728\\u589E\\u52A0 Hooks\\uFF0C\\u5B9E\\u9645\\u4E0A\\u7EC4\\u4EF6\\u5185\\u90E8\\u7EF4\\u62A4\\u4E86\\u4E00\\u4E2A\\u72B6\\u6001\\uFF0C\\u53EF\\u80FD props \\u4E0D\\u4FEE\\u6539\\uFF0C\\u89C6\\u56FE UI \\u4E5F\\u4F1A\\u53D8\\u52A8\\uFF0C\\u4F46\\u662F\\u6BCF\\u6B21\\u4F7F\\u7528\\u76F8\\u540C\\u7684 props \\u6E32\\u67D3\\u51FA\\u6765\\u7684\\u89C6\\u56FEUI\\u8868\\u73B0\\u548C\\u72B6\\u6001\\u90FD\\u662F\\u80FD\\u786E\\u5B9A\\u7684\"), mdx(\"p\", null, \"Hooks \\u7684\\u51FA\\u73B0\\u4E00\\u4E2A\\u662F\\u589E\\u52A0\\u51FD\\u6570\\u7EC4\\u4EF6\\u4E2D\\u72B6\\u6001\\u7BA1\\u7406\\u7684\\u53EF\\u80FD\\u6027\\uFF0C\\u800C\\u4E14\\u8FD8\\u80FD\\u63D0\\u4F9B\\u4E00\\u4E2A\\u66F4\\u7EC6\\u7C92\\u5EA6\\u7684\\u903B\\u8F91\\u590D\\u7528\\u3002\"), mdx(\"p\", null, \"\\u518D\\u6B21\\u5C06\\u4E0A\\u9762\\u7684\\u4F8B\\u5B50\\u5C01\\u88C5\\u51FA\\u6765\\u7684\\u7ED3\\u679C\\u975E\\u5E38\\u6E05\\u723D\\uFF0C\\u4E0D\\u7528\\u5173\\u5FC3\\u751F\\u547D\\u5468\\u671F\\uFF0C\\u53EA\\u9700\\u8981\\u5173\\u5FC3\\u72B6\\u6001\\u548C\\u6539\\u53D8\\u72B6\\u6001\\u7684\\u884C\\u4E3A\\uFF1A\"), mdx(Demo3, {\n mdxType: \"Demo3\"\n }), mdx(\"h3\", null, \"2.1 \\u5168\\u65B0\\u7684\\u601D\\u7EF4\"), mdx(\"p\", null, \"\\u5728 Hooks \\u53D1\\u5E03\\u7B2C\\u4E00\\u65F6\\u95F4\\u4E4B\\u540E\\uFF0C\\u6211\\u89C9\\u5F97\\u8FD9\\u4E2A\\u5F62\\u5F0F\\u662F\\u7F16\\u7A0B\\u4E60\\u60EF\\u4E0A\\u7684\\u95EE\\u9898\\uFF0C\\u7231\\u7528 Class \\u5C31\\u7528\\uFF0C\\u7231\\u7528 hooks \\u4E5F\\u53EF\\u4EE5\\uFF0C\\u53EA\\u8981\\u4E1A\\u52A1\\u4E2D\\u7EDF\\u4E00\\u5373\\u53EF\\u3002\\u6240\\u4EE5\\u5927\\u6982\\u62FF\\u4E86\\u51E0\\u4E2A class \\u7EC4\\u4EF6\\u8F6C\\u6210 hooks \\u4E4B\\u540E\\uFF0C\\u4E5F\\u6CA1\\u89C9\\u5F97\\u6709\\u4EC0\\u4E48\\u5927\\u4E0D\\u4E86\\u7684\\uFF0C\\u751A\\u81F3\\u8FD8\\u89C9\\u5F97\\u90A3\\u4E9B use-* \\u6709\\u70B9\\u4E0D\\u77E5\\u6240\\u4E91\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F\\u7528\\u7684\\u591A\\u4E86\\u4E4B\\u540E\\u53D1\\u73B0\\uFF0C\\u597D\\u50CF\\u5E76\\u4E0D\\u662F\\u8FD9\\u6837\\u7684\\uFF0Chooks \\u4E0D\\u4EC5\\u4EC5\\u662F\\u5B9E\\u73B0\\u4E86\\u529F\\u80FD\\uFF0C\\u8FD8\\u6084\\u9ED8\\u9ED8\\u7684\\u628A\\u6211\\u5BF9\\u7EC4\\u4EF6\\u7684\\u8BA4\\u77E5\\u6539\\u53D8\\u4E86\\u3002\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u4E4B\\u524D\"), \" \\u6211\\u4EE5\\u4E3A\\u7684\\u7EC4\\u4EF6\\u662F\\u72B6\\u6001\\u52A0\\u751F\\u547D\\u5468\\u671F\\u7684\\u4FEE\\u6539\\u72B6\\u6001\\uFF0C\\u6709\\u4EC0\\u4E48\\u72B6\\u6001\\u6E32\\u67D3\\u4EC0\\u4E48\\u754C\\u9762\\uFF0C\\u7136\\u540E\\u5728\\u751F\\u547D\\u5468\\u671F\\u4E2D\\u5BF9\\u72B6\\u6001\\u8FDB\\u884C\\u6539\\u53D8\\u3002\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u73B0\\u5728\"), \" \\u5173\\u5FC3\\u54EA\\u4E9B\\u662F\\u72B6\\u6001\\uFF0C\\u6709\\u54EA\\u4E9B\\u662F\\u526F\\u4F5C\\u7528\\uFF0C\\u6709\\u54EA\\u4E9B\\u662F\\u8BA1\\u7B97\\u548C\\u6E32\\u67D3\\uFF0C\\u4E0D\\u9700\\u8981\\u5173\\u5FC3\\u6211\\u4EC0\\u4E48\\u65F6\\u5019\\u624D\\u80FD\\u505A\\u54EA\\u4E9B\\u4E8B\\u3002\"), mdx(\"h3\", null, \"2.2 \\u6E10\\u5165\\u4F73\\u5883\"), mdx(\"p\", null, \"\\u7406\\u89E3\\u4E86 hooks \\u4E4B\\u540E\\uFF0C\\u5BF9\\u90A3\\u4E9B\\u4EE5 use-* \\u6A21\\u5F0F\\u7684\\u65B9\\u6CD5\\u540D\\u4E5F\\u662F\\u559C\\u6B22\\u5F97\\u7D27\\uFF0C\\u7B80\\u76F4\\u4F20\\u795E\\uFF0C\\u9700\\u8981\\u4EC0\\u4E48\\u6A21\\u5F0F\\u3001\\u529F\\u80FD\\u3001\\u6269\\u5C55\\u3001\\u6570\\u636E\\uFF0C\\u5C01\\u88C5\\u4E00\\u4E2A use \\u65B9\\u6CD5\\uFF0C\\u76F4\\u63A5\\u8C03\\u7528\\u5373\\u53EF\\uFF0C\\u72B6\\u6001\\u548C\\u4FEE\\u6539\\u72B6\\u6001\\u7684\\u65B9\\u6CD5\\u80FD\\u591F\\u62BD\\u8C61\\u7684\\u5F88\\u5E72\\u51C0\\uFF0C\\u5404\\u79CD\\u903B\\u8F91\\u90FD\\u96C6\\u6210\\u5728\\u4E00\\u8D77\\u800C\\u4E0D\\u662F\\u62C6\\u5206\\u5230\\u5404\\u4E2A\\u751F\\u547D\\u5468\\u671F\\u3002\"), mdx(\"p\", null, \"\\u6BD4\\u5982\\u6700\\u7B80\\u5355\\u76F4\\u63A5\\u7684\\u5C31\\u662F\\u5728\\u9700\\u8981\\u7B80\\u5355\\u6570\\u636E\\u4EA4\\u4E92\\u7684\\u5730\\u65B9\\u4F7F\\u7528 useState \\u4E86\\uFF1A\"), mdx(\"hr\", {\n style: {\n margin: '20px 0'\n }\n }), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"const View = () => {\\n let [count, setCount] = React.useState(0)\\n return \\n}\\n\")), mdx(CodeWithPreview, {\n withTitle: true,\n preview: mdx(View, {\n mdxType: \"View\"\n }),\n mdxType: \"CodeWithPreview\"\n }), mdx(\"br\", null), mdx(\"br\", null), mdx(\"p\", null, \"\\u7B80\\u5355\\u4E24\\u884C\\u7684\\u51FD\\u6570\\uFF0C\\u5C31\\u53EF\\u4EE5\\u5C01\\u88C5\\u6210\\u539F\\u672C\\u9700\\u8981 class \\u624D\\u80FD\\u5B8C\\u6210\\u7684\\u529F\\u80FD\\u4E86\\uFF0C\\u800C\\u4E14\\u5F88\\u597D\\u7684\\u5C01\\u88C5\\u4E86\\u903B\\u8F91\\u5B9E\\u73B0\\uFF0C\\u5F88\\u597D\\u7528\\uFF0C\\u6BD4\\u5982\\u4F7F\\u7528\\u6211\\u81EA\\u5DF1\\u5C01\\u88C5\\u7684\\u72B6\\u6001\\u7BA1\\u7406\\u6846\\u67B6 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/studio/novus\"\n }, \"novus\"), \"\\uFF1A\"), mdx(CodeWithPreview, {\n column: true,\n codes: [{\n lang: \"ts\",\n code: novus_hooks_novusCodeStr2\n }],\n withTitle: true,\n preview: mdx(ExampleTodoExample, {\n mdxType: \"ExampleTodoExample\"\n }),\n mdxType: \"CodeWithPreview\"\n }), mdx(\"p\", null, \"\\u72B6\\u6001\\u548C\\u6539\\u53D8\\u72B6\\u6001\\u7684\\u884C\\u4E3A\\uFF0C\\u8FD8\\u662F\\u975E\\u5E38\\u6709\\u52A9\\u4E8E\\u7A0B\\u5E8F\\u7684\\u62BD\\u8C61\\u903B\\u8F91\\u7684\\u3002\"), mdx(\"h2\", null, \"4. \\u4ECE useCallback \\u548C deps \\u6765\\u770B\\u4E0D\\u540C\\u7684\\u7EC4\\u4EF6\\u601D\\u7EF4\\u65B9\\u5F0F\\u548C\\u6027\\u80FD\\u4F18\\u5316\\uFF0C\\u4EE5\\u53CA\\u95ED\\u5305\\u7684\\u80FD\\u529B\"), mdx(\"p\", null, \"\\u5148\\u770B\\u4E00\\u4E2A\\u5C0F\\u6817\\u5B50\\uFF1A\"), mdx(CodeWithPreview, {\n codes: [{\n lang: 'jsx',\n code: \"function Counter() {\\n const [count, setCount] = useState(0);\\n useEffect(() => {\\n const id = setInterval(() => {\\n setCount(count + 1); // \\u8FD9\\u4E2A\\u526F\\u4F5C\\u7528\\u8BA1\\u7B97\\u4F9D\\u8D56\\u4E8E count \\u7684\\u503C\\n }, 1000);\\n return () => clearInterval(id);\\n }, []); // \\uD83D\\uDD34 Bug: \\u4F46\\u662F\\u5728\\u5E76\\u6CA1\\u6709\\u8BBE\\u7F6E\\u8FD9\\u4E2A\\u4F9D\\u8D56\\n return
{count}
;\\n}\"\n }],\n withTitle: true,\n column: true,\n preview: mdx(\"div\", null, \"\\u672C\\u5E94\\u8BE5\\u6BCF\\u79D2 +1 \\u7684\\u503C\\uFF1A\", mdx(Counter, {\n mdxType: \"Counter\"\n })),\n mdxType: \"CodeWithPreview\"\n }), mdx(\"p\", null, \"\\u5C0F\\u670B\\u53CB\\u4F60\\u662F\\u5426\\u6709\\u5F88\\u591A\\u95EE\\u53F7\\uFF1F\\u4E3A\\u4EC0\\u4E48\\u754C\\u9762\\u7684\\u503C\\u4E00\\u76F4\\u6CA1\\u6709\\u66F4\\u65B0\\u5462\\uFF1F\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"ps: \\u4E0A\\u9762\\u7684\\u5B9E\\u4F8B\\u4EC5\\u7528\\u6765\\u6F14\\u793A\\u4E3A\\u4EC0\\u4E48\\u8BA1\\u7B97\\u80FD\\u591F\\u88AB\\u7F13\\u5B58\\uFF0CuseCallback \\u4F9D\\u8D56\\u4E8E\\u6BCF\\u6B21\\u53D8\\u66F4\\u7684\\u72B6\\u6001\\u7684\\u8BDD\\uFF0C\\u4E5F\\u6CA1\\u4EC0\\u4E48\\u610F\\u4E49\\uFF0C\\u5F92\\u589E\\u8017\\u65F6\\u3002\")), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u539F\\u56E0\\u5728\\u4E8E\\uFF0Ceffect / callback \\u6267\\u884C\\u7684\\u65F6\\u5019\\uFF0C\\u4F1A\\u521B\\u5EFA\\u4E00\\u4E2A\\u95ED\\u5305\\uFF0C\\u5185\\u90E8\\u5BF9 state \\u7684\\u8BBF\\u95EE\\u4F9D\\u8D56\\u4E8E\\u95ED\\u5305\\u4E2D\\u521D\\u59CB\\u7684\\u503C 0\\u3002deps \\u53C2\\u6570\\u8868\\u793A\\u6BCF\\u6B21 render \\u7684\\u65F6\\u5019\\u9700\\u8981\\u5224\\u65AD\\u4E0E\\u4E0A\\u6B21\\u7684\\u503C\\u8FDB\\u884C\\u6D45\\u6BD4\\u8F83\\uFF0C\\u5982\\u679C\\u6CA1\\u6709\\u53D8\\u52A8\\u5C31\\u4F1A\\u7F13\\u5B58\\u4E0A\\u6B21\\u7684\\u51FD\\u6570\\uFF0C\\u4E5F\\u5305\\u62EC\\u8FD9\\u4E2A\\u95ED\\u5305\\u5185\\u90E8\\u7684\\u4F20\\u503C\\u5F15\\u7528\\u3002\\u5982\\u679C deps \\u4E3A\\u7A7A\\uFF0C\\u8868\\u793A\\u4E0D\\u4F1A\\u66F4\\u65B0\\u8FD9\\u4E2A\\u95ED\\u5305\\uFF0C\\u5BFC\\u81F4\\u6BCF\\u6B21\\u6267\\u884C\\u51FD\\u6570\\u4E2D\\u7684\\u503C\\u4F1A\\u6C38\\u8FDC\\u662F\\u5F53\\u65F6\\u521D\\u59CB\\u5316\\u7684\\u503C\\u3002\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback\"\n }, \"How to read an often-changing value from useCallback?\")), mdx(\"p\", null, \"\\u6B63\\u786E\\u7684\\u505A\\u6CD5\\u5E94\\u8BE5\\u662F\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts{6,9}\"\n }, \"function Counter() {\\n const [count, setCount] = useState(0);\\n\\n useEffect(() => {\\n const id = setInterval(() => {\\n setCount(c => c + 1); // \\u2705 \\u5728\\u8FD9\\u4E0D\\u4F9D\\u8D56\\u4E8E\\u5916\\u90E8\\u7684 `count` \\u53D8\\u91CF\\n }, 1000);\\n return () => clearInterval(id);\\n }, []); // \\u2705 \\u6211\\u4EEC\\u7684 effect \\u4E0D\\u4F7F\\u7528\\u7EC4\\u4EF6\\u4F5C\\u7528\\u57DF\\u4E2D\\u7684\\u4EFB\\u4F55\\u53D8\\u91CF\\uFF0C\\u8868\\u793A\\u53EA\\u4F1A\\u6267\\u884C\\u4E00\\u6B21\\n\\n return

{count}

;\\n}\\n\")), mdx(\"p\", null, \"\\u6240\\u4EE5 hooks \\u5728\\u6BCF\\u6B21\\u66F4\\u7EC6\\u4F60\\u90FD\\u4F1A\\u6267\\u884C\\u7684\\u51FD\\u6570\\u4F53\\u5185\\u600E\\u4E48\\u4FDD\\u5B58\\u72B6\\u6001\\u548C\\u51FD\\u6570\\u7684\\u5462\\uFF1F\\u7B54\\u6848\\u662F\\u4F7F\\u7528\\u4E86\\u95ED\\u5305\\u3002\\u4E0B\\u9762\\u7528\\u975E\\u5E38\\u7B80\\u5355\\u7684\\u5B9E\\u73B0\\u6765\\u6F14\\u793A\\u4E0B\\u4E00\\u4E2A\\u95ED\\u5305\\uFF1A\"), mdx(CodeWithPreview, {\n codes: [{\n lang: 'jsx',\n code: \"let cacheVal\\nfunction useState(initVal){\\n if (!cacheVal) cacheVal = initVal\\n function updateVal(newVal) {\\n cacheVal = newVal\\n }\\n return [cacheVal, updateVal]\\n}\\n\\nlet cacheFunc\\nfunction useEffect(func) {\\n if (!cacheFunc) {\\n cacheFunc = func\\n cacheFunc()\\n }\\n}\\n\\nfunction Counter() {\\n const [count, setCount] = useState(0);\\n useEffect(() => {\\n (() => {\\n setCount(count + 1);\\n })();\\n });\\n return count\\n}\\n\\nconsole.log(Counter()) // 0\\nconsole.log(Counter()) // 1\\nconsole.log(Counter()) // 1\\nconsole.log(Counter()) // 1\\nconsole.log(Counter()) // 1\"\n }],\n withTitle: true,\n mdxType: \"CodeWithPreview\"\n }), mdx(\"p\", null, \"\\u4E5F\\u5C31\\u662F\\u95ED\\u5305\\u5728\\u83B7\\u53D6\\u503C\\u7684\\u65F6\\u5019\\u5DF2\\u7ECF\\u5728\\u4E0A\\u4E0B\\u6587\\u73AF\\u5883\\u4E2D\\u7F13\\u5B58\\u4E86\\u8FD9\\u4E2A\\u503C\\uFF0C\\u518D\\u591A\\u6B21\\u8C03\\u7528\\u4E5F\\u6CA1\\u529E\\u6CD5\\u66F4\\u65B0\\uFF0C\\u8FD9\\u4E5F\\u662F hooks \\u7528\\u6765\\u7F13\\u5B58\\u8BA1\\u7B97\\u63D0\\u5347\\u6027\\u80FD\\u7684\\u4E00\\u4E2A\\u65B9\\u6848\\u3002\"), mdx(\"p\", null, \"\\u66F4\\u591A\\u7684 hooks \\u6027\\u80FD\\u548C react \\u6027\\u80FD\\u8C03\\u4F18\\u53EF\\u4EE5\\u5728\\u53E6\\u4E00\\u7BC7\\u6587\\u7AE0\\u4E2D\\u4E86\\u89E3\\uFF1A\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/blog/react-pratice-and-performance\"\n }, \"\\uD83D\\uDCCA React \\u5B9E\\u8DF5\\u6280\\u5DE7\\u548C\\u6027\\u80FD\\u4F18\\u5316\")), mdx(\"h3\", null, \"\\u95ED\\u5305\\u539F\\u56E0\\u5BFC\\u81F4\\u7684\\u5F88\\u591A\\u5E38\\u89C1\\u95EE\\u9898\\uFF0C\\u5982\\u679C\\u4E0D\\u4E86\\u89E3\\u8FD9\\u4E2A\\u7279\\u6027\\uFF0C\\u6216\\u8005 use-* \\u505A\\u7684\\u5F88\\u590D\\u6742\\u4E4B\\u540E\\u5F88\\u53EF\\u80FD\\u4F1A\\u83AB\\u540D\\u5176\\u5999\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"const useSomeHook = () => {\\n\\n // \\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u72B6\\u6001\\n const [status, setStatus] = useState(false)\\n\\n // \\u5C01\\u88C5\\u7684\\u8BA1\\u7B97\\u903B\\u8F91\\uFF0C\\u91CC\\u9762\\u4F1A\\u4FEE\\u6539\\u72B6\\u6001\\n const someFunc = useCallback(() => {\\n\\n setStatus(!status)\\n\\n // \\u867D\\u7136\\u4E0A\\u9762\\u6709\\u66F4\\u65B0 state \\u503C\\uFF0C\\u4F46\\u662F\\u56E0\\u4E3A\\u6B64\\u5904\\u7684\\u503C\\u5F15\\u7528\\u662F\\u95ED\\u5305\\u4E2D\\u4E0A\\u6B21\\u7684\\u503C\\uFF0C\\u6240\\u4EE5\\u6CA1\\u529E\\u6CD5\\u83B7\\u5F97\\u7ACB\\u5373\\u7684\\u66F4\\u65B0\\u503C\\n // \\u5FC5\\u987B\\u7B49\\u518D\\u6B21\\u8C03\\u7528 someFunc = useCallback(...) \\u624D\\u80FD\\u8FD0\\u884C\\u65B0\\u751F\\u6210\\u7684\\u5305\\u542B\\u66F4\\u65B0\\u503C\\u7684\\u95ED\\u5305\\u51FD\\u6570\\n console.log('status => ', status) // false\\n\\n if(status) console.log('hello world!')\\n else console.log('hello react!') // \\u221A\\n\\n }, [status])\\n\\n useEffect(() => {\\n document.body.addEventListener('click', someFunc, false)\\n return () => {\\n document.body.removeEventListener('click', someFunc, false)\\n }\\n }, []) // \\u6B64\\u5904\\u6CA1\\u6709\\u4F9D\\u8D56\\uFF0C\\u6240\\u4EE5\\u70B9\\u51FB\\u4E8B\\u4EF6\\u6C38\\u8FDC\\u4F7F\\u7528\\u7684\\u662F\\u7B2C\\u4E00\\u6B21\\u7684 someFunc\\uFF0C\\u6240\\u4EE5\\u53EF\\u80FD\\u6C38\\u8FDC\\u4E5F\\u6CA1\\u529E\\u6CD5\\u62FF\\u5230\\u6B63\\u786E\\u7684 state\\uFF0C\\u5BFC\\u81F4\\u5185\\u90E8\\u4F7F\\u7528\\u7684 state \\u548C return \\u8F93\\u51FA\\u7684 state \\u4E0D\\u4E00\\u81F4\\u7684\\u60C5\\u51B5\\n\\n useEffect(() => {\\n\\n console.log(status) // false\\n setStatus(true)\\n console.log(status) // false\\n \\n // class \\u7EC4\\u4EF6\\u4E2D\\uFF0C\\u56E0\\u4E3A setState \\u662F\\u5F02\\u6B65\\u7684\\uFF0C\\u4E00\\u822C setTimeout \\u5728\\u4E0B\\u4E00\\u4E2A EventLoop \\u4E2D\\u80FD\\u591F\\u83B7\\u53D6\\u5230\\u66F4\\u65B0\\u503C\\n // \\u4F46\\u662F\\u8FD9\\u91CC\\u7684 status \\u56E0\\u4E3A\\u4E00\\u76F4\\u5F15\\u7528\\u7684\\u662F\\u95ED\\u5305\\u7684\\u503C\\uFF0C\\u662F\\u4E0D\\u4F1A\\u5728 1s \\u540E\\u66F4\\u65B0\\u7684\\n setTimeout(() => {\\n console.log(status) // false\\n }, 1000);\\n\\n }, [status])\\n\\n const loopFunc = useCallback(() => {\\n for (let i = 0; i < 5; i++) {\\n // \\u6B64\\u5904\\u867D\\u7136 useCallback \\u4F9D\\u8D56\\u4E86 someFunc\\uFF0C\\u4F46\\u662F\\u6BCF\\u6B21\\u5FAA\\u73AF\\u5185\\u90E8\\u90FD\\u662F\\u4F7F\\u7528\\u7684\\u95ED\\u5305\\u503C\\uFF0C\\u7B2C\\u4E00\\u6B21\\u5FAA\\u73AF\\u4E2D setState \\u4E5F\\u6CA1\\u529E\\u6CD5\\u518D\\u7B2C\\u4E8C\\u6B21\\u5FAA\\u73AF\\u5C31\\u770B\\u5230\\u66F4\\u65B0\\u540E\\u7684\\u503C\\n someFunc()\\n }\\n }, [someFunc])\\n\\n // !!!!! \\u5982\\u679C\\u4E00\\u4E2A\\u51FD\\u6570\\u672C\\u8EAB\\u5C31\\u9700\\u8981\\u4F9D\\u8D56\\u4E8E\\u9891\\u7E41\\u53D8\\u52A8\\u7684\\u72B6\\u6001\\uFF0C\\u90A3\\u4E48\\u4F7F\\u7528 use-* \\u4F18\\u5316\\u6027\\u80FD\\u672C\\u8EAB\\u4E5F\\u6CA1\\u529E\\u6CD5\\u505A\\u5230\\uFF0C\\u6700\\u597D\\u662F\\u628A\\u4E0D\\u4F9D\\u8D56\\u72B6\\u6001\\u7684\\u8BA1\\u7B97\\u90E8\\u5206\\u5265\\u79BB\\u5148\\n\\n return [status, someFunc, loopFunc]\\n}\\n\\n\")), mdx(\"h2\", null, \"5. \\u7ED3\\u8BBA\"), mdx(\"hr\", null), mdx(\"p\", null, \"hooks \\u7684\\u601D\\u60F3\\u662F\\u5F00\\u53D1\\u8005\\u4E0D\\u518D\\u9700\\u8981\\u53BB\\u7406\\u6E05\\u6BCF\\u4E00\\u4E2A\\u751F\\u547D\\u5468\\u671F\\u51FD\\u6570\\u7684\\u89E6\\u53D1\\u65F6\\u673A\\uFF0C\\u4EE5\\u53CA\\u5728\\u91CC\\u9762\\u5904\\u7406\\u903B\\u8F91\\u4F1A\\u6709\\u54EA\\u4E9B\\u5F71\\u54CD\\u3002\\u800C\\u662F\\u66F4\\u5173\\u6CE8\\u53BB\\u601D\\u8003\\u54EA\\u4E9B\\u662F\\u72B6\\u6001\\uFF0C\\u54EA\\u4E9B\\u662F\\u526F\\u4F5C\\u7528\\uFF0C\\u54EA\\u4E9B\\u662F\\u9700\\u8981\\u7F13\\u5B58\\u7684\\u590D\\u6742\\u8BA1\\u7B97\\u548C\\u4E0D\\u5FC5\\u8981\\u7684\\u6E32\\u67D3\\u3002\"), mdx(\"p\", null, \"class \\u66F4\\u504F\\u5411\\u7684\\u662F\\u6E05\\u6670\\u5B8C\\u6574\\u7684\\u751F\\u547D\\u5468\\u671F\\uFF0C\\u4E00\\u4E2A\\u7ECF\\u5178\\u7684\\u9762\\u5411\\u5BF9\\u8C61\\u601D\\u60F3\\uFF0C\\u5F3A\\u8C03\\u7684\\u662F\\u65B9\\u6CD5\\u548C\\u5C5E\\u6027\\u3002\"));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"d96d11a2-0488-56a8-9113-753a97f12f03","prev":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/full-stack.md","id":"e4929f26-4432-5ad2-a704-a0f176aa00a6","parent":{"name":"full-stack","sourceInstanceName":"blog"},"excerpt":"想分享的是自己对全栈的想法，从自豪的自称为全栈，到现在懂得术业有专攻，全栈是个职业，不能随便叫自己全栈开发工程师，对职业本身负责，能力广泛、兴趣宽广、懂得很多，也只能是我自己项目的全栈工程师。 Just do whatever it takes to make it work…","fields":{"title":"🚀 全栈=全干","slug":"/blog/full-stack","description":"全栈=全干，一个在前后端都有生产能力、各类技术都有涉猎的工种，一般顶着这个头衔表示团队多面手、救火队员、项目全包的瑞士军刀，在一线岗位发扬不怕苦不怕累、哪里需要哪里搬的精神，广受小公司、创业公司的欢迎。","date":"2019-09-28","redirects":null,"datetime":"2019-09-28 09:39:01","categories":["code"],"series":null,"tags":["思考","协作","技巧"],"status":"online"},"frontmatter":{"published":null,"tags":["思考","协作","技巧"],"theme":null,"slug":"full-stack","date":"2019-09-28 09:39:01"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"full-stack\",\n \"title\": \"🚀 全栈=全干\",\n \"date\": \"2019-09-28 09:39:01\",\n \"author\": \"Ubug\",\n \"description\": \"全栈=全干，一个在前后端都有生产能力、各类技术都有涉猎的工种，一般顶着这个头衔表示团队多面手、救火队员、项目全包的瑞士军刀，在一线岗位发扬不怕苦不怕累、哪里需要哪里搬的精神，广受小公司、创业公司的欢迎。\",\n \"categories\": [\"code\"],\n \"tags\": [\"思考\", \"协作\", \"技巧\"],\n \"banner\": \"./banner.jpg\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u60F3\\u5206\\u4EAB\\u7684\\u662F\\u81EA\\u5DF1\\u5BF9\\u5168\\u6808\\u7684\\u60F3\\u6CD5\\uFF0C\\u4ECE\\u81EA\\u8C6A\\u7684\\u81EA\\u79F0\\u4E3A\\u5168\\u6808\\uFF0C\\u5230\\u73B0\\u5728\\u61C2\\u5F97\\u672F\\u4E1A\\u6709\\u4E13\\u653B\\uFF0C\\u5168\\u6808\\u662F\\u4E2A\\u804C\\u4E1A\\uFF0C\\u4E0D\\u80FD\\u968F\\u4FBF\\u53EB\\u81EA\\u5DF1\\u5168\\u6808\\u5F00\\u53D1\\u5DE5\\u7A0B\\u5E08\\uFF0C\\u5BF9\\u804C\\u4E1A\\u672C\\u8EAB\\u8D1F\\u8D23\\uFF0C\\u80FD\\u529B\\u5E7F\\u6CDB\\u3001\\u5174\\u8DA3\\u5BBD\\u5E7F\\u3001\\u61C2\\u5F97\\u5F88\\u591A\\uFF0C\\u4E5F\\u53EA\\u80FD\\u662F\\u6211\\u81EA\\u5DF1\\u9879\\u76EE\\u7684\\u5168\\u6808\\u5DE5\\u7A0B\\u5E08\\u3002\")), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"Just do whatever it takes to make it work.\")), mdx(\"h2\", null, \"\\u5168\\u6808\\u548C\\u6280\\u672F\\u65E0\\u5173\"), mdx(\"p\", null, \"\\u5E73\\u5FC3\\u800C\\u8BBA\\u4E00\\u4E2A\\u6709\\u81EA\\u6211\\u4FEE\\u517B\\u7684\\u5168\\u6808\\u5DE5\\u7A0B\\u5E08\\uFF0C\\u5185\\u5FC3\\u5176\\u5B9E\\u6709\\u53D1\\u73B0\\u9700\\u6C42\\u7684\\u55C5\\u89C9\\u3001\\u6709\\u505A\\u4EA7\\u54C1\\u7684\\u5FC3\\u601D\\u3001\\u6709\\u8BBE\\u8BA1\\u89E3\\u51B3\\u65B9\\u6848\\u7684\\u80FD\\u529B\\u3001\\u6709\\u5F88\\u5F3A\\u7684\\u5B66\\u4E60\\u80FD\\u529B\\uFF0C\\u80FD\\u591F\\u4E3A\\u4E86\\u5B9E\\u73B0\\u76EE\\u6807\\u53BB\\u638C\\u63E1\\u4EFB\\u4F55\\u6240\\u5FC5\\u987B\\u7684\\u6280\\u672F\\u6808\\uFF0C\\u6240\\u4EE5\\u4E00\\u4E2A\\u5168\\u6808\\u5185\\u5FC3\\u66F4\\u613F\\u610F\\u81EA\\u79F0\\u662F \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"[\\u5BF9\\u80FD\\u591F\\u89E3\\u51B3\\u95EE\\u9898\\u7684\\u4EFB\\u4F55\\u6280\\u672F\\u611F\\u5174\\u8DA3\\u7684\\u4EBA]\"), \"\\u3002\"), mdx(\"p\", null, \"\\u5F88\\u5C11\\u4EBA\\u53EF\\u4EE5\\u5BF9\\u5168\\u90E8\\u6280\\u672F\\u6808\\u90FD\\u6709\\u975E\\u5E38\\u6DF1\\u7684\\u7406\\u89E3\\uFF0C\\u6BD5\\u7ADF\\u786E\\u5B9E\\u975E\\u5E38\\u56F0\\u96BE\\uFF0C\\u751A\\u81F3\\u9700\\u8981\\u5728\\u4E1A\\u52A1\\u5C42\\u9762\\u6DF1\\u8015\\u5F88\\u4E45\\u624D\\u80FD\\u5BF9\\u6280\\u672F\\u6808\\u7406\\u89E3\\u6DF1\\u5165\\u3002\\u4F46\\u662F\\u5168\\u6808\\u6240\\u8FFD\\u6C42\\u7684\\uFF0C\\u662F\\u4E3A\\u4E86\\u65E0\\u8BBA\\u5982\\u4F55\\u90FD\\u8981\\u89E3\\u51B3\\u95EE\\u9898\\u7684\\u6001\\u5EA6\\uFF0C\\u6709\\u8DB3\\u591F\\u7684\\u5174\\u8DA3\\u9A71\\u4F7F\\u53BB\\u5B66\\u4E60\\u65B0\\u7684\\u9886\\u57DF\\uFF0C\\u8FC8\\u51FA\\u8212\\u9002\\u533A\\u7684\\u95E8\\u69DB\\uFF0C\\u5373\\u4F7F\\u5F88\\u7B28\\u62D9\\u7684\\u5B9E\\u73B0\\u4E5F\\u80FD\\u5B8C\\u6210\\u9047\\u5230\\u7684\\u9700\\u6C42\\u3002\"), mdx(\"p\", null, \"\\u8BF4\\u767D\\u4E86\\uFF0C\\u6254\\u7ED9\\u4E00\\u4E2A\\u5168\\u6808\\u4E00\\u4E2A\\u95EE\\u9898\\uFF0C\\u4ED6\\u5C31\\u80FD\\u81EA\\u5DF1\\u4ECE\\u5206\\u6790\\u9700\\u6C42\\u3001\\u8BBE\\u8BA1\\u4EA7\\u54C1\\u5230\\u8BBE\\u8BA1\\u754C\\u9762\\u3001\\u5B8C\\u6210\\u4EA7\\u54C1\\uFF0C\\u72EC\\u7ACB\\u8D1F\\u8D23\\u6240\\u6709\\u6280\\u672F\\u6808\\uFF0C\\u5373\\u4F7F\\u5E76\\u4E0D\\u80FD\\u5728\\u6BCF\\u4E00\\u65B9\\u9762\\u90FD\\u505A\\u7684\\u5F88\\u597D\\u3002\"), mdx(\"p\", null, \"\\u5168\\u6808\\u5DE5\\u7A0B\\u5E08\\u5728\\u5982\\u4ECA\\u7684 IT \\u9886\\u57DF\\u7EC6\\u5206\\u5E02\\u573A\\uFF0C\\u5927\\u90E8\\u5206\\u662F\\u627F\\u62C5\\u5927\\u524D\\u7AEF\\u548C\\u540E\\u7AEF\\u4E1A\\u52A1\\u7684\\u5C97\\u4F4D\\uFF0C\\u5305\\u62EC\\u7528\\u6237\\u754C\\u9762\\uFF08Web\\u3001App\\uFF09\\u3001\\u540E\\u53F0\\u63A5\\u53E3\\u548C\\u6570\\u636E\\u5904\\u7406\\u7B49\\u6D41\\u7A0B\\u90FD\\u5728\\u6280\\u672F\\u6808\\u8303\\u56F4\\u5185\\uFF0C\\u4E1A\\u52A1\\u5E7F\\u5EA6\\u80FD\\u591F\\u8986\\u76D6\\u5B8C\\u6574\\u7684\\u4E00\\u4E2A\\u4EA7\\u54C1\\u3002\"), mdx(\"p\", null, \"\\u5168\\u6808\\u5DE5\\u7A0B\\u5E08\\u5174\\u8D77\\u4E00\\u65B9\\u9762\\u662F\\u56E0\\u4E3A\\u5DE5\\u7A0B\\u5E08\\u5929\\u751F\\u5BF9\\u6280\\u672F\\u5E7F\\u5EA6\\u7684\\u62D3\\u5C55\\uFF0C\\u4F46\\u662F\\u53E6\\u4E00\\u65B9\\u9762\\u662F\\u521B\\u4E1A\\u516C\\u53F8\\u3001\\u5C0F\\u516C\\u53F8\\u7684\\u4E00\\u4E9B\\u4E2D\\u5C0F\\u578B\\u9879\\u76EE\\uFF0C\\u4E00\\u4E2A\\u5168\\u6808\\u5DE5\\u7A0B\\u5E08\\u76F8\\u6BD4\\u5DE5\\u79CD\\u9F50\\u5168\\u7684\\u56E2\\u961F\\u6027\\u4EF7\\u6BD4\\u9AD8\\u7684\\u592A\\u591A\\u3002\\u6BD5\\u7ADF\\u6CA1\\u6709\\u90A3\\u4E48\\u4E25\\u82DB\\u7684\\u4EA7\\u54C1\\u9700\\u6C42\\u7684\\u80CC\\u666F\\u4E0B\\uFF0C\\u5F88\\u5C0F\\u7684\\u5F00\\u53D1\\u5468\\u671F\\uFF0C\\u51E0\\u4E4E\\u6CA1\\u6709\\u7684\\u6C9F\\u901A\\u6210\\u672C\\uFF0C\\u4F7F\\u7528\\u5168\\u6D41\\u7A0B\\u6280\\u672F\\u6808\\u5B8C\\u6210\\u76EE\\u6807\\u4EFB\\u52A1\\uFF0C\\u80FD\\u591F\\u6309\\u65F6\\u4E0A\\u7EBF\\u6EE1\\u8DB3\\u4F7F\\u7528\\u5BF9\\u5C0F\\u56E2\\u961F\\u3001\\u5C0F\\u516C\\u53F8\\u662F\\u5F88\\u91CD\\u8981\\u7684\\u3002\"), mdx(\"p\", null, \"\\u5F53\\u7136\\u5168\\u6808\\u5BF9\\u4E8E\\u6280\\u672F\\u4EBA\\u672C\\u8EAB\\u6765\\u8BF4\\uFF0C\\u592A\\u8FC7\\u4E8E\\u6D89\\u53CA\\u6280\\u672F\\u5E7F\\u5EA6\\uFF0C\\u56EB\\u56F5\\u541E\\u67A3\\u4F3C\\u7684\\u6F2B\\u65E0\\u76EE\\u7684\\u4E5F\\u6CA1\\u6709\\u4EFB\\u4F55\\u610F\\u4E49\\uFF0C\\u8FD9\\u4E9B\\u6280\\u672F\\u6808\\u7684\\u70B9\\u6570\\u5206\\u914D\\u8FD8\\u662F\\u6839\\u636E\\u505A\\u7684\\u4E8B\\u60C5\\u6765\\u8003\\u8651\\uFF0C\\u6F2B\\u65E0\\u76EE\\u7684\\u7684\\u4E71\\u5B66\\u4E0D\\u662F\\u5168\\u6808\\u7684\\u672C\\u610F\\uFF0C\", mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u6574\\u4E2A\\u77E5\\u8BC6\\u4F53\\u7CFB\\u548C\\u6280\\u80FD\\u56FE\\u7684\\u7EF4\\u62A4\\u662F\\u4E00\\u4E2A\\u5DE5\\u7A0B\\u5E08\\u4EF7\\u503C\\u6700\\u5927\\u5316\\u7684\\u5173\\u952E\"), \"\\u3002\"), mdx(\"h2\", null, \"\\u80FD\\u591F\\u5168\\u6808\\uFF0C\\u4F46\\u4E0D\\u662F\\u5168\\u6808\\u5DE5\\u7A0B\\u5E08\"), mdx(\"p\", null, \"\\u53EF\\u662F\\uFF0C\\u7231\\u597D\\u5F88\\u5E7F\\u6CDB\\uFF0C\\u4F46\\u662F\\u5174\\u8DA3\\u6709\\u5927\\u5C0F\\uFF0C\\u4ECE\\u7B2C\\u4E00\\u884C\\u4EE3\\u7801\\u5230\\u73B0\\u5728\\u6240\\u77E5\\u9053\\u7684\\u6280\\u672F\\u6808\\u786E\\u5B9E\\u53EF\\u4EE5\\u88AB\\u79F0\\u4E3A\\u5168\\u6808\\u5DE5\\u7A0B\\u5E08\\uFF0C\\u6280\\u672F\\u4E0A\\u80FD\\u591F\\u7528\\u5F88\\u591A\\u80FD\\u529B\\u505A\\u670D\\u52A1\\u5668\\u642D\\u5EFA\\u548C\\u7EF4\\u62A4\\u3001\\u6570\\u636E\\u5E93\\u67E5\\u8BE2\\u3001\\u540E\\u53F0\\u63A5\\u53E3\\uFF0C\\u80FD\\u591F\\u7528\\u5F88\\u591A\\u8BED\\u8A00\\u505A\\u5305\\u62EC\\u547D\\u4EE4\\u884C\\u3001Web\\u3001Flutter\\u3001Android\\u3001IOS\\u3001\\u5C0F\\u7A0B\\u5E8F\\uFF0C\\u80FD\\u591F\\u505A\\u4EA7\\u54C1\\u8BBE\\u8BA1\\u3001\\u9700\\u6C42\\u754C\\u9762\\u8BBE\\u8BA1\\u751A\\u81F3\\u89C6\\u9891\\u6F14\\u793A\\u5236\\u4F5C\\uFF0C\\u4F46\\u662F\\u6211\\u5374\\u4E0D\\u559C\\u6B22\\u8FD9\\u4E2A\\u5934\\u8854\\u3002\"), mdx(\"p\", null, \"\\u5168\\u6808\\u4E4B\\u4E8E\\u6211\\u81EA\\u5DF1\\uFF0C\\u613F\\u610F\\u4E3A\\u4E86\\u81EA\\u5DF1\\u7684\\u5C0F\\u60F3\\u6CD5\\u5C0F\\u9879\\u76EE\\u82B1\\u65F6\\u95F4\\u53BB\\u7814\\u7A76\\uFF0C\\u613F\\u610F\\u4E3A\\u4E86\\u6539\\u8FDB\\u81EA\\u5DF1\\u9879\\u76EE\\u7684\\u4E00\\u4E2A\\u5C0F\\u529F\\u80FD\\u7206\\u809D\\uFF0C\\u4E5F\\u613F\\u610F\\u7ED9\\u81EA\\u5DF1\\u7684\\u9879\\u76EE\\u914D\\u9F50\\u5404\\u4E2A\\u7AEF\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F\\u5728\\u516C\\u53F8\\u662F\\u4E00\\u4E2A\\u4E25\\u8083\\u6CA1\\u90A3\\u4E48\\u9E21\\u8840\\u7684\\u5730\\u65B9\\uFF0C\\u6BCF\\u4E2A\\u5DE5\\u7A0B\\u5E08\\u9700\\u8981\\u4E3A\\u81EA\\u5DF1\\u7684\\u8F93\\u51FA\\u8D1F\\u8D23\\u3002\\u6211\\u5174\\u8DA3\\u8F83\\u5C0F\\u6216\\u8005\\u521A\\u63A5\\u89E6\\u7684\\u6280\\u672F\\u6808\\uFF0C\\u6211\\u505A\\u7684\\u51C6\\u5219\\u5927\\u90E8\\u5206\\u662F\\u80FD\\u7528\\u5373\\u53EF\\uFF0C\\u5185\\u5FC3\\u5F88\\u96BE\\u60F3\\u7740\\u53BB\\u4F18\\u5316\\u548C\\u66F4\\u597D\\u7684\\u89E3\\u51B3\\u65B9\\u6848\\uFF0C\\u800C\\u5174\\u8DA3\\u5F88\\u5927\\u7684\\u6280\\u672F\\u6808\\uFF0C\\u6211\\u613F\\u610F\\u82B1\\u66F4\\u591A\\u7684\\u65F6\\u95F4\\u505A\\u51FA\\u4F18\\u96C5\\u7684\\u5B9E\\u73B0\\uFF0C\\u6240\\u4EE5\\u6211\\u662F\\u4E00\\u4E2A\\u6709\\u504F\\u597D\\u7684\\u5168\\u6808\\uFF0C\\u4F5C\\u4E3A\\u5F00\\u53D1\\uFF0C\\u8FD9\\u5BF9\\u4E8E\\u516C\\u53F8\\u662F\\u4E00\\u4E2A\\u4E0D\\u597D\\u7684\\u70B9\\uFF0C\\u6211\\u53EF\\u4EE5\\u5B8C\\u6210\\u9879\\u76EE\\u521D\\u671F\\u7684\\u5F00\\u53D1\\uFF0C\\u53EF\\u4EE5\\u7528\\u81EA\\u5DF1\\u5728\\u5168\\u6808\\u4E0A\\u7684\\u80FD\\u529B\\u5BF9\\u6280\\u672F\\u65B9\\u6848\\u8BC4\\u4F30\\uFF0C\\u800C\\u5982\\u679C\\u4E3A\\u7A0D\\u5FAE\\u5927\\u4E00\\u4E9B\\u7684\\u56E2\\u961F\\u5168\\u90E8\\u7684\\u6280\\u672F\\u6808\\u8D1F\\u8D23\\uFF0C\\u5C31\\u9700\\u8981\\u6DF1\\u5165\\u4E86\\u89E3\\uFF0C\\u5404\\u53F8\\u5176\\u804C\\u7684\\u4E13\\u5BB6\\uFF0C\\u771F\\u4E0D\\u662F\\u4E00\\u4E2A\\u5168\\u6808\\u5DE5\\u7A0B\\u5E08\\u7684\\u5DE5\\u4F5C\\uFF0C\\u80FD\\u529B\\u518D\\u5F3A\\u4E5F\\u4E0D\\u884C\\u3002\", mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u6211\\u7684\\u5168\\u6808\\u662F\\u6211\\u5174\\u8DA3\\u7684\\u6700\\u5927\\u4F53\\u73B0\\u3002\")), mdx(\"hr\", null), mdx(\"div\", null, mdx(\"div\", {\n style: {\n textAlign: 'center'\n }\n }, \"\\u751F\\u547D\\u4E0D\\u606F\\uFF0C\\u6298\\u817E\\u4E0D\\u6B62\\u3002\")), mdx(\"hr\", null));\n}\n;\nMDXContent.isMDXComponent = true;"},"next":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/project-readme.md","id":"2434c3dc-a8ef-5e9a-bf85-7ee3504df40b","parent":{"name":"project-readme","sourceInstanceName":"blog"},"excerpt":"想分享的是自己在团队内推行的一个项目说明，尤其是多项目切换和多人协作的工作环境。 1. 咋想的 项目的声明周期包括初始化、开发、迭代、部署、交接等，一个维护良好的项目的这些流程不可能随意混乱。在 git 仓库托管大部分项目的背景下，readme 一般作为一个 work board…","fields":{"title":"📒 项目说明怎么写 - Readme 的自我修养","slug":"/blog/project-readme","description":"项目的门面，项目的第一眼，交接的核心，质量的基础，沉淀和总结的关键，写好一个 ReadMe 是一个程序员的基本要求。","date":"2019-09-10","redirects":null,"datetime":"2019-09-10 20:06:21","categories":["code"],"series":null,"tags":["技巧","最佳实践","协作"],"status":"online"},"frontmatter":{"published":null,"tags":["技巧","最佳实践","协作"],"theme":null,"slug":"project-readme","date":"2019-09-10 20:06:21"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"project-readme\",\n \"title\": \"📒 项目说明怎么写 - Readme 的自我修养\",\n \"date\": \"2019-09-10 20:06:21\",\n \"author\": \"Ubug\",\n \"description\": \"项目的门面，项目的第一眼，交接的核心，质量的基础，沉淀和总结的关键，写好一个 ReadMe 是一个程序员的基本要求。\",\n \"categories\": [\"code\"],\n \"tags\": [\"技巧\", \"最佳实践\", \"协作\"],\n \"banner\": \"./banner.jpg\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u60F3\\u5206\\u4EAB\\u7684\\u662F\\u81EA\\u5DF1\\u5728\\u56E2\\u961F\\u5185\\u63A8\\u884C\\u7684\\u4E00\\u4E2A\\u9879\\u76EE\\u8BF4\\u660E\\uFF0C\\u5C24\\u5176\\u662F\\u591A\\u9879\\u76EE\\u5207\\u6362\\u548C\\u591A\\u4EBA\\u534F\\u4F5C\\u7684\\u5DE5\\u4F5C\\u73AF\\u5883\\u3002\")), mdx(\"hr\", null), mdx(\"h2\", null, \"1. \\u548B\\u60F3\\u7684\"), mdx(\"p\", null, \"\\u9879\\u76EE\\u7684\\u58F0\\u660E\\u5468\\u671F\\u5305\\u62EC\\u521D\\u59CB\\u5316\\u3001\\u5F00\\u53D1\\u3001\\u8FED\\u4EE3\\u3001\\u90E8\\u7F72\\u3001\\u4EA4\\u63A5\\u7B49\\uFF0C\\u4E00\\u4E2A\\u7EF4\\u62A4\\u826F\\u597D\\u7684\\u9879\\u76EE\\u7684\\u8FD9\\u4E9B\\u6D41\\u7A0B\\u4E0D\\u53EF\\u80FD\\u968F\\u610F\\u6DF7\\u4E71\\u3002\\u5728 git \\u4ED3\\u5E93\\u6258\\u7BA1\\u5927\\u90E8\\u5206\\u9879\\u76EE\\u7684\\u80CC\\u666F\\u4E0B\\uFF0Creadme \\u4E00\\u822C\\u4F5C\\u4E3A\\u4E00\\u4E2A work board \\u89D2\\u8272\\uFF0C\\u6807\\u8BB0\\u6BCF\\u4E2A\\u91CD\\u8981\\u7684\\u8BF4\\u660E\\u3002\\u4ECE\\u6211\\u76EE\\u524D\\u7684\\u5DE5\\u4F5C\\u4E2D\\uFF0C\\u804A\\u804A\\u600E\\u4E48\\u624D\\u80FD\\u8F83\\u597D\\u7684\\u7EF4\\u62A4\\u4E00\\u4EFD\\u4EA7\\u54C1\\u6587\\u6863\\uFF0C\\u4E0D\\u81F3\\u4E8E\\u5FEB\\u901F\\u4E0A\\u624B\\u4E24\\u5E74\\u524D\\u7684\\u8001\\u65E7\\u670D\\u52A1\\uFF0C\\u4E0D\\u81F3\\u4E8E\\u79BB\\u804C\\u4E00\\u5468\\u641E\\u4E0D\\u5B9A\\u4EA4\\u63A5\\u3002\"), mdx(\"p\", null, \"\\u4E00\\u4E2A\\u4EA7\\u54C1\\u6587\\u6863\\u7684\\u8BE6\\u7EC6\\u7A0B\\u5EA6\\u4E0E\\u590D\\u6742\\u7A0B\\u5EA6\\u3001\\u6D89\\u53CA\\u4EBA\\u6570\\u3001\\u91CD\\u8981\\u6027\\u3001\\u76F8\\u5173\\u8054\\u5EA6\\u6709\\u5173\\u7CFB\\uFF0C\\u7B80\\u5355\\u7684\\u4E00\\u4E2A\\u9879\\u76EE\\u4E5F\\u4E0D\\u9700\\u8981\\u957F\\u7BC7\\u7D2F\\u724D\\u7684\\u8BF4\\u4E2A\\u6CA1\\u5B8C\\uFF0C\\u5B9E\\u73B0\\u548C\\u903B\\u8F91\\u90FD\\u653E\\u5230\\u4EE3\\u7801\\u91CC\\uFF0C\\u6587\\u6863\\u662F\\u4F5C\\u4E3A\\u4E00\\u4E2A\\u8BF4\\u660E\\u4E66\\u5B58\\u5728\\u3002\"), mdx(\"h2\", null, \"2. \\u522B\\u4EBA\\u5BB6\\u7684\"), mdx(\"p\", null, \"GitHub \\u4E0A\\u7684\\u5F00\\u6E90\\u9879\\u76EE\\u6839\\u636E\\u4E0D\\u540C\\u7684\\u7528\\u9014\\uFF0C\\u4E00\\u822C\\u6709\\u662F\\u4EC0\\u4E48\\u548C\\u600E\\u4E48\\u7528\\u7684\\u5206\\u7C7B\\uFF0C\\u5305\\u62EC\\u7B80\\u5355\\u4ECB\\u7ECD\\u3001Features\\u3001Usage(Get Started)\\u3001Demo\\u3001ChangeLog\\u3001License\"), mdx(\"p\", null, \"\\u5176\\u4E2D get started \\u6709\\u7684\\u662F\\u600E\\u4E48\\u7528\\u63A5\\u53E3\\uFF0C\\u6709\\u7684\\u662F\\u600E\\u4E48\\u5728\\u6B64\\u57FA\\u7840\\u5F00\\u53D1\\u3002\\u5F53\\u7136\\u6211\\u4EEC\\u81EA\\u5DF1\\u7684\\u9879\\u76EE\\u548C\\u8FD9\\u4E9B\\u5F00\\u653E\\u7684\\u9879\\u76EE\\u4E0D\\u540C\\uFF0C\\u4F46\\u662F\\u4E5F\\u662F\\u80FD\\u501F\\u9274\\u4E0B\\u3002\"), mdx(\"h2\", null, \"3. \\u6211\\u4EEC\\u8981\\u8FBE\\u6210\\u7684\\u76EE\\u7684\"), mdx(\"p\", null, \"\\u6211\\u4EEC\\u5199\\u8FD9\\u4E2A\\u6587\\u6863\\u7684\\u76EE\\u7684\\u5176\\u5B9E\\u8BF4\\u767D\\u4E86\\u662F\\u9762\\u5411\\u79BB\\u804C\\u7F16\\u7A0B\\uFF0C\\u522B\\u4EBA\\u751A\\u81F3\\u81EA\\u5DF1\\u770B\\u5230\\u8FD9\\u4E2A\\u6587\\u6863\\u90FD\\u4E0D\\u9700\\u8981\\u6307\\u5BFC\\u5C31\\u80FD\\u5F88\\u597D\\u7684\\u4EA4\\u63A5\\uFF0C\\u5F53\\u7136\\u8FD9\\u4E2A\\u4E1C\\u897F\\u662F\\u8BA9\\u8D1F\\u8D23\\u534F\\u4F5C\\u7684\\u5C0F\\u4F19\\u4F34\\u3001\\u540E\\u7EED\\u7EF4\\u62A4\\u7684\\u5C0F\\u4F19\\u4F34\\u3001\\u90E8\\u7F72\\u5230\\u7EBF\\u4E0A\\u7684\\u5C0F\\u4F19\\u4F34\\u90FD\\u80FD\\u8212\\u5FC3\\u7684\\uFF0C\\u4E0D\\u591A\\u7684\\u6587\\u5B57\\u5C31\\u80FD\\u7701\\u4E0B\\u5F88\\u591A\\u53E3\\u820C\\u4E4B\\u4E89\\u3002\"), mdx(\"p\", null, \"\\u5177\\u4F53\\u8981\\u4ECB\\u7ECD\\u7684\\u4E1C\\u897F\\u6709\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u9879\\u76EE\\u662F\\u5E72\\u561B\\u7684\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u4E3A\\u4EC0\\u4E48\\u5F00\\u8FD9\\u4E2A\\u9879\\u76EE\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u9879\\u76EE\\u53C2\\u8003\\u7684\\u5177\\u4F53\\u6587\\u6863\\u548C\\u9700\\u6C42\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u600E\\u4E48\\u624D\\u80FD\\u8BA9\\u9879\\u76EE\\u5B89\\u5168\\u8DD1\\u8D77\\u6765\\u3001\\u505C\\u4E0B\\u6765\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u9700\\u8981\\u4F9D\\u8D56\\u54EA\\u4E9B\\u5176\\u4ED6\\u670D\\u52A1\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u600E\\u4E48\\u624D\\u80FD\\u672C\\u5730\\u8C03\\u8BD5\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u9879\\u76EE\\u7684\\u57FA\\u672C\\u76EE\\u5F55\\u548C\\u67B6\\u6784\\u8BF4\\u660E\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u6CE8\\u610F\\u4E8B\\u9879\\u548C\\u4E00\\u822C\\u5F02\\u5E38\\u8BF4\\u660E\")), mdx(\"p\", null, \"\\u505A\\u5230\\u4E0A\\u9762\\u7684\\u6761\\u76EE\\uFF0C\\u57FA\\u672C\\u4E0A\\u4E5F\\u80FD\\u5927\\u81F4\\u660E\\u767D\\u9879\\u76EE\\u7684\\u6574\\u4F53\\u4E86\\u3002\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u5F00\\u53D1\\u73AF\\u5883\\u3001\\u4F9D\\u8D56\\u51C6\\u5907\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u5F00\\u53D1\\u542F\\u52A8\\u3001\\u9884\\u89C8\\u3001\\u8C03\\u8BD5\\u6B65\\u9AA4\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u6280\\u672F\\u9009\\u578B\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u6838\\u5FC3\\u4EE3\\u7801\\u529F\\u80FD\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u9879\\u76EE\\u76EE\\u5F55\\u7ED3\\u6784\\u548C\\u91CD\\u70B9\\u6587\\u4EF6\\u8BF4\\u660E\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u5F00\\u53D1\\u6CE8\\u610F\\u4E8B\\u9879\")), mdx(\"p\", null, \"\\u4E0A\\u9762\\u8FD9\\u4E9B\\u8BE6\\u7EC6\\u7684\\u4ECE\\u96F6\\u5F00\\u59CB\\u5F00\\u53D1\\u6B65\\u9AA4\\uFF0C\\u65B9\\u4FBF\\u81EA\\u5DF1\\u8FC1\\u79FB\\u3001\\u518D\\u7EF4\\u62A4\\uFF0C\\u65B9\\u4FBF\\u522B\\u4EBA\\u63A5\\u624B\\u9879\\u76EE\\u3002\\u5C24\\u5176\\u662F\\u4F9D\\u8D56\\u5F88\\u591A\\u524D\\u671F\\u4F9D\\u8D56\\u51C6\\u5907\\u7684\\u5F00\\u53D1\\u6A21\\u5F0F\\uFF0C\\u6BD4\\u5982\\u4E00\\u4E2A\\u6838\\u5FC3\\u529F\\u80FD\\uFF0C\\u9700\\u8981\\u672C\\u5730\\u989D\\u5916\\u542F\\u52A8\\u591A\\u4E2A mock \\u6570\\u636E\\u5E93\\u3001mock \\u63A5\\u53E3\\u3001\\u914D\\u7F6E\\u8C03\\u8BD5\\u73AF\\u5883\\u7B49\\uFF0C\\u8FD9\\u4E2A\\u65F6\\u5019\\u4E00\\u4E2A command list \\u771F\\u7684\\u4F1A\\u5C06\\u51C6\\u5907\\u65F6\\u95F4\\u4ECE\\u4E00\\u4E2A\\u5C0F\\u65F6\\u8FD8\\u4E0D\\u77E5\\u9053\\u6709\\u6CA1\\u6709\\u5B8C\\u6574\\u7F29\\u51CF\\u5230 5 \\u5206\\u949F\\u51C6\\u5907\\u5B8C\\u6BD5\\u3002\\uFF08PS\\uFF1A\\u5176\\u5B9E\\u5982\\u679C\\u65E5\\u5E38\\u5F00\\u53D1\\u9700\\u8981\\u8FD9\\u4E48\\u4E9B\\u914D\\u5957 server \\u542F\\u52A8\\uFF0C\\u9700\\u8981\\u624B\\u52A8\\u5F00\\u53D1\\u4E00\\u4E2A\\u547D\\u4EE4\\u884C\\u4E4B\\u7C7B\\u7684\\u5DE5\\u5177\\u4F5C\\u4E3A\\u811A\\u624B\\u67B6\\u6765\\u7F29\\u51CF\\u5230 1 \\u5206\\u949F\\u65F6\\u95F4\\u3002\\uFF09\"), mdx(\"h2\", null, \"4. \\u56E2\\u961F\\u4E2D\\u7684\\u6807\\u51C6\"), mdx(\"p\", null, \"\\u9879\\u76EE\\u6587\\u6863\\u5982\\u679C\\u8131\\u79BB\\u4E86\\u56E2\\u961F\\u7684\\u73AF\\u5883\\u4E5F\\u6CA1\\u4EC0\\u4E48\\u610F\\u4E49\\uFF0C\\u6240\\u4EE5\\u56E2\\u961F\\u600E\\u4E48\\u7EF4\\u62A4\\u9879\\u76EE\\u7684\\uFF0C\\u8001\\u9879\\u76EE\\u600E\\u4E48\\u5FEB\\u901F\\u4E0A\\u624B\\uFF0C\\u6BCF\\u4E2A\\u9879\\u76EE\\u600E\\u4E48\\u90E8\\u7F72\\u3001\\u5F00\\u53D1\\u90FD\\u662F\\u6709\\u4E00\\u4E2A\\u901A\\u7528\\u6280\\u672F\\u6808\\u7684\\uFF0C\\u5E76\\u4E0D\\u5B58\\u5728\\u4E00\\u4E2A\\u6807\\u51C6\\u7684\\u6A21\\u7248\\u6587\\u6863\\uFF0C\\u5C24\\u5176\\u662F\\u9879\\u76EE\\u5FEB\\u901F\\u8FED\\u4EE3\\uFF0C\\u6587\\u6863\\u7684\\u7EF4\\u62A4\\u5F88\\u591A\\u65F6\\u5019\\u4E5F\\u662F\\u529B\\u4E0D\\u4ECE\\u5FC3\\u3002\\u5C24\\u5176\\u9879\\u76EE\\u8D76\\u5DE5\\u3001\\u56E2\\u961F\\u5F88\\u5C0F\\u3001\\u6280\\u672F\\u6808\\u7B80\\u5355\\u7684\\u60C5\\u51B5\\uFF0C\\u6587\\u6863\\u4E5F\\u5E76\\u4E0D\\u662F\\u975E\\u8981\\u4E8B\\u65E0\\u5DE8\\u7EC6\\u3002\"), mdx(\"p\", null, \"\\u4EB2\\u8EAB\\u4F53\\u4F1A\\u4E00\\u4E2A\\u5C0F\\u516C\\u53F8\\uFF0C\\u4ECE\\u7B80\\u5355\\u53E3\\u5934\\u4EA4\\u63A5\\u5373\\u53EF\\uFF0C\\u5230\\u753B\\u5230\\u767D\\u677F\\u4E0A\\u624D\\u80FD\\u8BF4\\u6E05\\u5168\\u90E8\\u670D\\u52A1\\uFF0C\\u6700\\u540E\\u5168\\u90FD\\u6807\\u51C6\\u5316\\u5230\\u6587\\u6863\\u7684\\u4E00\\u4E2A\\u8FC7\\u7A0B\\u3002\"), mdx(\"h2\", null, \"5. \\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u793A\\u4F8B\"), mdx(\"p\", null, \"\\u4E0B\\u9762\\u662F\\u5C0F\\u56E2\\u961F\\u4E4B\\u95F4\\uFF0C\\u5185\\u90E8\\u9879\\u76EE\\u8F83\\u591A\\u7684\\u60C5\\u51B5\\u4E0B\\u7684\\u4E00\\u4E2A\\u793A\\u4F8B\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-md\"\n }, \"----\\n\\n# \\u9879\\u76EE\\u540D\\u79F0\\n\\n> \\u9879\\u76EE\\u529F\\u80FD\\u7B80\\u4ECB\\u3002\\uFF08\\u8BF4\\u660E\\uFF1A\\u7528\\u7CBE\\u7B80\\u7684\\u6587\\u5B57\\u63CF\\u8FF0\\u672C\\u9879\\u76EE\\u76EE\\u524D\\u7248\\u672C\\u3001\\u4E3B\\u8981\\u529F\\u80FD\\u3001\\u90E8\\u7F72\\u4F4D\\u7F6E\\u3001\\u76EE\\u524D\\u7EF4\\u62A4\\u4EBA\\u5458\\u7B49\\uFF09\\n\\n[TOC] \\uFF08\\u8BF4\\u660E\\uFF1A\\u6587\\u6863\\u7684\\u76EE\\u5F55\\u3002\\u8F83\\u957F\\u7684\\u6587\\u6863\\u6700\\u597D\\u589E\\u52A0\\u6587\\u6863\\u7D22\\u5F15\\u76EE\\u5F55\\uFF09\\n\\n----\\n\\n## 1. \\u80CC\\u666F\\n\\n### 1.1 \\u9879\\u76EE\\u7684\\u5F00\\u53D1\\u80CC\\u666F\\n\\nxx\\n\\n### 1.2 \\u9700\\u8981\\u89E3\\u51B3\\u7684\\u95EE\\u9898\\n\\nxx\\n\\n### 1.3 \\u4EA7\\u54C1\\u6587\\u6863\\u4F4D\\u7F6E(GIT)\\n\\nxx\\n\\n### 1.4 \\u4E3B\\u8981\\u53C2\\u8003\\u63A5\\u53E3\\u6587\\u6863\\u4F4D\\u7F6E(GIT)\\n\\nxx\\n\\n\\uFF08\\u4EE5\\u4E0A\\u9009\\u5199\\uFF09\\n\\n----\\n\\n## 2. \\u5B89\\u88C5/\\u90E8\\u7F72\\u8BF4\\u660E\\n\\n\\u673A\\u5668\\u7C7B\\u578B\\u3001\\u670D\\u52A1\\u7C7B\\u578B\\u3001\\u5DE5\\u4F5C\\u6A21\\u5F0F\\n\\n\\uFF08\\u4ECE\\u5E72\\u51C0\\u7684\\u670D\\u52A1\\u5668\\u673A\\u5668\\uFF0C\\u5230\\u80FD\\u6B63\\u5E38\\u8FD0\\u884C\\u670D\\u52A1\\u7684\\u5168\\u90E8\\u73AF\\u5883\\u5B89\\u88C5\\u548C\\u914D\\u7F6E\\uFF0C\\u5305\\u62EC\\u4EE3\\u7801\\u66F4\\u65B0\\u3001\\u542F\\u52A8\\u505C\\u6B62\\u3001\\u65E5\\u5FD7\\u4FDD\\u5B58\\uFF09\\n\\n### 2.1 \\u5B89\\u88C5\\u673A\\u5668\\n\\nxx\\n\\n### 2.2 \\u73AF\\u5883\\u51C6\\u5907\\n\\nxx\\n\\n### 2.3 \\u4EE3\\u7801\\u90E8\\u7F72\\n\\nxx\\n\\n### 2.4 \\u670D\\u52A1\\u542F\\u52A8/\\u505C\\u6B62/\\u81EA\\u542F\\u52A8\\n\\nxx\\n\\n### 2.5 \\u6CE8\\u610F\\u4E8B\\u9879/tips\\n\\nxx\\n\\n----\\n\\n## 3. \\u5F00\\u53D1\\u8BF4\\u660E\\n\\n### 3.1 \\u521D\\u59CB\\u5316\\u4EE3\\u7801\\u4ED3\\u5E93\\n\\ngit clone gitlaburl libname\\n\\n### 3.2 \\u6280\\u672F\\u9009\\u578B\\n\\n\\u4F7F\\u7528\\u4E86\\u4EC0\\u4E48\\u6846\\u67B6\\uFF0C\\u67B6\\u6784\\u7B49\\n\\n### 3.3 \\u672C\\u5730\\u73AF\\u5883\\n\\n\\uFF08\\u4ECE\\u5E72\\u51C0\\u7684\\u5F00\\u53D1\\u673A\\u5668\\uFF0C\\u5230\\u80FD\\u6B63\\u5E38\\u8FDB\\u884C\\u5F00\\u53D1\\u7684\\u5168\\u90E8\\u73AF\\u5883\\u5B89\\u88C5\\u548C\\u914D\\u7F6E\\uFF0C\\u65B9\\u4FBF\\u5DE5\\u4F5C\\u8F6C\\u79FB\\u4EA4\\u63A5\\uFF09\\n\\n\\u8F6F\\u4EF6/\\u76F8\\u5173\\u914D\\u7F6E/\\u5F00\\u53D1\\u9884\\u89C8\\n\\n\\u5176\\u4ED6\\u8BF4\\u660E\\n\\n### 3.4 \\u5EFA\\u8BAE\\u5F00\\u53D1\\u6B65\\u9AA4\\n\\n\\u5728\\u90A3\\u4E2A\\u6587\\u4EF6\\u5939\\u4E0B\\u6267\\u884C\\u4EC0\\u4E48\\u547D\\u4EE4\\uFF0C\\u5230\\u4EC0\\u4E48\\u9875\\u9762\\u9884\\u89C8\\u6548\\u679C\\uFF1B\\n\\u5F00\\u53D1\\u4EC0\\u4E48\\u5DE5\\u5177\\u80FD\\u65B9\\u4FBF\\u5F00\\u53D1\\n\\n----\\n\\n## 4. \\u672C\\u5730\\u76EE\\u5F55\\n\\n\\u76EE\\u5F55\\u7ED3\\u6784\\u4ECB\\u7ECD\\n\\n## 5. \\u5176\\u4ED6\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;"}}}}